<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器</title>
    <link rel="stylesheet" href="../../css/main.css">
    <script src="../../mapData/js/jquery.min.js"></script>
    <script type="text/javascript" src="../../mapData/js/echarts/echarts.js"></script>
</head>
<body>
<div id="map" style="height: 910px;width: 100%;float: left"></div>
<div id="wrong-message" class="wrong-message">当前选择：四川</div>
</body>
<script type="text/javascript">
    var mapOption;
    // 初始化echarts示例mapChart
    var mapChart = echarts.init(document.getElementById('map'));
    $(function()
    {
        getOption();
    });
    function getOption()
    {
        // echarts配置json文件的地址
        var chartUrl = "../../config/china_map.json";
        // 读取echartsoption配置
        $.get(chartUrl, function (option)
        {
            mapOption = option;
            getMap();
        });
    }
    function getMap()
    {
        // 地图json文件的地址
        var mapUrl = "../../mapData/map/json/china.json";
        // 读取geo地图数据
        $.get(mapUrl, function (json)
        {
            echarts.registerMap('china', json); // 注册地图
            mapOption.series[0].data = [{name:"四川",selected:true}];
            mapChart.setOption(mapOption);
        });
    }
    mapChart.on("mapselectchanged", function (param)
    {
        var selected = param.batch[0].selected;
        var str = '当前选择： ';
        for (var p in selected)
        {
            if (selected[p])
            {
                str += p + ' ';
            }
        }
        document.getElementById('wrong-message').innerHTML = str;
    });
</script>
</html>